<template>
  <el-form label-width="80px" :model="spuInfo">
    <h1>{{ unSelectSaleAttr }}</h1>
    <el-form-item label="SPU名称">
      <el-input v-model="spuInfo.spuName"></el-input>
    </el-form-item>
    <el-form-item label="品牌">
      <el-select placeholder="请选择" v-model="spuInfo.tmId">
        <el-option
          :label="trademark.tmName"
          :value="trademark.id"
          v-for="(trademark, index) in trademarkList"
          :key="trademark.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="SPU描述">
      <el-input type="textarea" v-model="spuInfo.description"></el-input>
    </el-form-item>
    <el-form-item label="SPU图片">
      <el-upload
        action="/dev-api/admin/product/fileUpload"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :file-list="spuImageList"
        :on-success="handleSuccess"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-select placeholder="请选择" value="">
        <el-option :label="unSelectSaleAttr" value="value"></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-plus" style="margin: 0 5px"
        >添加销售属性</el-button
      >
      <el-table style="width: 100%; margin-top: 10px" border>
        <el-table-column type="index" label="序号" width="80px" align="center">
        </el-table-column>
        <el-table-column prop="prop" label="属性名" width="150">
        </el-table-column>
        <el-table-column prop="prop" label="属性值名称列表" width="width">
        </el-table-column>
        <el-table-column prop="prop" label="操作" width="150">
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">保存</el-button>
      <el-button @click="changeScene"> 取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "SpuForm",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      //   存储当前类的信息
      spuInfo: {
        category3Id: "", //三级分类的ID
        spuName: "", //收集SPU的名字
        tmId: "", //收集品牌的ID
        description: "", //收集类的描述信息
        spuImageList: [
          // {
          //   imgName: "", //图片的名字
          //   imgUrl: "", //图片的地址
          // },
        ],

        spuSaleAttrList: [
          //销售属性地方
          // {
          //   baseSaleAttrId: "", //销售属性的ID
          //   saleAttrName: "", //销售属性的名字
          //   spuSaleAttrValueList: [
          //     //销售属性值的地方
          //     {
          //       baseSaleAttrId: 0, //当前销售属性值属于哪一个销售属性的
          //       saleAttrValueName: "", //销售属性值的名字
          //     },
          //   ],
          // },
        ],
      },
      // 存储照片墙的数据
      spuImageList: [],
      // 品牌的数据
      trademarkList: [],
      // 销售属性
      attrList: [],
    };
  },
  methods: {
    //  图片删除的钩子
    handleRemove(file, fileList) {
      this.spuImageList = fileList;
    },
    // 图片预览的钩子
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传成功的钩子
    handleSuccess(response, file, fileList) {
      this.spuImageList = fileList;
    },
    // 取消按钮的回调
    changeScene() {
      // 触发自定义事件
      this.$emit("changeScene", 0);
    },
    async initData(spuId) {
      //   第一个请求:通过Id获取当前修改类的信息
      let promise1 = this.$ajax.spu.reqSpuById(spuId);
      // 获取照片墙的信息
      let promise2 = this.$ajax.spu.reqSpuImageList(spuId);
      // 获取品牌的数据
      let promise3 = this.$ajax.spu.reqTrademarkList();
      // 获取整个项目的全部数据
      let promise4 = this.$ajax.spu.reqSaleAttrList();
      // 利用promise.all获取全部返回成功的数据
      let arr = await Promise.all([promise1, promise2, promise3, promise4]);
      this.spuInfo = arr[0].data;
      this.spuImageList = arr[1].data;
      // 修改数据 进行展示
      this.spuImageList = this.spuImageList.map((item) => {
        return {
          ...item,
          url: item.imgUrl,
          name: item.imgName,
        };
      });
      this.trademarkList = arr[2].data;
      this.attrList = arr[3].data;
    },
  },
  computed: {
    unSelectSaleAttr() {
      // 全部的销售属性
      console.log(this.attrList);
      //当前已有的销售属性
      console.log(this.spuInfo.spuSaleAttrList);
      // 外层数组:颜色,版本,尺码---name
      // 内层数组:版本
      let result=this.attrList.filter(item=>{
        // 最终需要返回一个布尔值
        return this.spuInfo.spuSaleAttrList.every(item1=>{
          return item.name!=item1.saleAttrName;
        })
      })
      return result
    },
  },
};
</script>

<style>
</style>